<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" name="" id="txt1">
  <input type="text" name="" id="txt2">
  <input type="text" name="" id="txt3">
  <input type="button" name="" id="insert" value="添加">
  <table border="1" width="400" align="center">
    <thead>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>联系方式</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
<script>

  var txt1 = document.getElementById("txt1")
  var txt2 = document.getElementById("txt2")
  var txt3 = document.getElementById("txt3")
  var insert = document.getElementById("insert")
  var tbody = document.querySelector("tbody")

  insert.onclick = function(){
    // 创建指定元素
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");
    var td4 = document.createElement("td");
    var tr = document.createElement("tr");

    // 设置元素内容
    td1.innerText = txt1.value;
    td2.innerText = txt2.value;
    td3.innerText = txt3.value;
    td4.innerText = "删除";
    
    // 插入到指定父元素
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    tbody.appendChild(tr);

    // 绑定点击事件
    td4.onclick = function(){
      // 执行删除功能
      tr.remove();
    }
  }
  
</script>
</html>